<template>
  <div class="conserveTaskDetail" v-if="detailForm">
    <h4>任务详情</h4>
    <table border="1" rules="all" class="table">
      <tr>
        <td>设备名称</td>
        <td>{{detailForm.deviceName}}</td>
        <td>设备编号</td>
        <td>{{detailForm.deviceCoder}}</td>
      </tr>
      <tr>
        <td>任务单号</td>
        <td>{{detailForm.taskCoder}}</td>
        <td>养护类型</td>
        <td>{{detailForm.conserveTypeName}}</td>
      </tr>
      <tr>
        <td>养护周期</td>
        <td>{{detailForm.circleCycle}}
          <span v-show="detailForm.circleUnit==1">天</span>
          <span v-show="detailForm.circleUnit==2">周</span>
          <span v-show="detailForm.circleUnit==3">月</span>
        </td>
        <td>责任人</td>
        <td>{{detailForm.chargeUserName}}</td>
      </tr>
      <tr class="height">
        <td>养护说明</td>
        <td colspan="3">
          {{detailForm.conserveExplain}}
        </td>
      </tr>
    </table>
    <h4>养护记录</h4>
    <table border="1" rules="all" class="table table1">
      <tr>
        <td>养护时间</td>
        <td>
          <el-date-picker
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          v-model="detailForm.executeDate">
        </el-date-picker>
        </td>
        <td>养护人</td>
        <td>{{username}}</td>
        <td>养护总费用</td>
        <td>{{detailForm.conserCost}}</td>
      </tr>
      <tr class="height">
        <td>养护描述</td>
        <td colspan="5">
          <el-input type="textarea" :rows="3" v-model="detailForm.conseDescribe"></el-input>
        </td>
      </tr>
    </table>
    <h4 class="uploadH4">图片 </h4>
    <el-upload
        :action="baseUrl()+'/common/upload'"
        :on-success="fileSuccess"
        :show-file-list="false"
        >
    <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button></el-upload>
    <div class="unloadBox">
      <div class="img" v-for="(item,index) in detailForm.deviceTaskAnnexList">
        <el-image :src="baseUrl()+item.filePath" :preview-src-list="[baseUrl()+item.filePath]"></el-image>
        <i class="el-icon-close" @click="imgDel(index,item.filePath)"></i>
      </div>
    </div>
    <h4>保养费用
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="cost">添加</el-button>
    </h4>
    <el-table :data="detailForm.deviceMaintainrcostList" border>
      <el-table-column label="名称" prop="name"/>
      <el-table-column label="使用人" prop="user">
         <template slot-scope="scope">
          {{userName}}
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="number" width="220">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.number" :min="0"  :controls="false" @change="sum(scope.row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="单价" prop="price" width="220">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.price" :min="0"  :controls="false" @change="sum(scope.row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template slot-scope="scope">{{scope.row.subtotal}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="dele(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="total">总计：{{detailForm.conserCost}}</div>
    <div class="btn">
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
    </div>
    <costDialog v-if="costDialog" @selectChange="currentChange"></costDialog>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import costDialog from "./costDialog";
  import {conservetaskInfo,conservetaskEdit} from '@/api/curing/index'
  import  {fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
  export default {
    name: "conserveTaskDetail.vue",
    components:{costDialog,},
    data() {
      return {
        userName:Cookies.get('username'),
        addForm: {
          startDate:'',//养护时间
          endDate:'',
          maintainName: '',//计划名称
          chargeUser:'',//责任人
          maintainType:'',//养护类别
          circleDate:'',//养护周期时间
          circleUnit:'',
          validDate:'',
          validUnit:'',
          noticeDate:'',
          noticeUnit:'',
          maintainInfo:'',
          enablePlan:'',//1是2否
          teamId:'',
        },//查询条件

        detailForm: null,
        taskStatus: false,
        taskLoading: false,
        // taskList: [],
        // taskTotal: 0,
        // taskForm: {
        //   pageNum: 1,
        //   pageSize: 10,
        // },
        fileList:[],
        costDialog:false,
        selectData:[],
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData(){
        conservetaskInfo(this.$route.query.id).then((res)=>{
          if(res.code==200){
            this.detailForm=res.data
          }
        })
      },
      
      fileSuccess(res) {
        //文件上传成功
        this.detailForm.deviceTaskAnnexList.push({ fileName: res.fileName, filePath: res.filePath})
      },
      sum() {
        this.detailForm.conserCost=0
        this.detailForm.deviceMaintainrcostList.forEach((item,index)=>{
          this.$set(item,'subtotal',item.number*item.price)
          this.$set(this.detailForm.deviceMaintainrcostList,index,item)

          this.detailForm.conserCost+=item.subtotal
          
        })
      },
      dele(index, row) {
        this.detailForm.deviceMaintainrcostList.splice(index, 1)
        this.$message.success('删除成功')
        this.sum()
      },
      async imgDel(index,filePath){
        for(let i=0;i<this.detailForm.deviceTaskAnnexList.length;i++){
          if(index==i){
            if(this.detailForm.deviceTaskAnnexList[i].id){
              await fileDeleteLibrary(this.detailForm.deviceTaskAnnexList[i].id)
            }else{
              await fileDelete(this.detailForm.deviceTaskAnnexList.filePath);
            }
            this.detailForm.deviceTaskAnnexList.splice(i, 1);
          }
        }
      },
      getTaskList() {

      },
      submit(){
        conservetaskEdit(this.detailForm).then((res)=>{
          if(res.code==200){
            this.$message.success(res.msg)
            this.$router.push({path:'/conserve/conserveTask'});
          }
        })
        
      },
      //费用
      cost(){
        this.costDialog=true
      },
      //成功回调
      currentChange(data){
        if(data){
          this.taskLoading=true
          this.detailForm.deviceMaintainrcostList=[]
          data.forEach((i,index)=>{
            this.detailForm.deviceMaintainrcostList[index]={
              name:i.dictLabel,
              number:0,
              price:0,
              subtotal:0,
              user:null,
              // conservetaskid:null,
              // id:null
            }
          })
          this.taskLoading=false
        }
        this.costDialog=false
      }
    }
  }
</script>

<style lang="scss">
  .conserveTaskDetail {
    margin-left: 10px;
    width: 905px;

    .btn {
      text-align: center;
    }

    h4 {
      color: #05A380;
    }
    .uploadDemo{
     margin:10px;
    }
    .img {
      border: 1px solid #cccccc;
      width: 900px;
      min-height: 50px;
    }

    .table {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;
      tr {
        td:nth-child(2n-1) {
          width: 150px;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 300px;
          padding-left: 10px;
        }
        td {
          line-height: 35px;
          .red {
            color: red;
          }
          .el-input--medium .el-input__inner,.el-textarea .el-textarea__inner{
            border: none;
          }
        }
        .right {
          text-align: right !important;
          padding-right: 10px;
        }
      }
    }

    .table1 {
      tr {
        td:nth-child(2n-1) {
          width: 100px;
          text-align: center;
        }
        td:nth-child(2n) {
          width: 200px;
          padding-left: 10px;
        }
      }
    }
    .total{
      text-align: right;
      margin-right:10px;
      margin-top:10px;
    }
    .unloadBox{
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }
  }

</style>
